<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>阅读统计柱状图</title>

</head>

<body>
	<div id="main" style="width: 100%; height: 600px;"></div>
	<script type="text/javascript"
		src="../lib/echarts-5.0.2/dist/echarts.min.js"></script>
	<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var ReadNum = [];
		var ReadName = [];
		$.post("../getReadro", {}, function(data) {
			for ( var i in data) {
				ReadNum.push(data[i].num);
				ReadName.push(data[i].r_name);
			}
			console.log(ReadNum);
			console.log(ReadName);
			// 指定图表的配置项和数据
			var option = {
				title : {
					text : '图表统计'
				},
				tooltip : {},
				legend : {
					data : [ '阅读量' ]
				},
				xAxis : {
					data : ReadName
				},
				yAxis : {},
				series : [ {
					name : '阅读量',
					type : 'bar',
					data : ReadNum
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}, "json");
	</script>
</body>

</html>